<template>
  <div id="funnel" ref="funnel" class="pie-bar"></div>
</template>
<script>
import { resizeChart } from "@/assets/js/echartOptions.js";
export default {
  name: "PieBar",
  data() {
    return {
      chart: null,
      options: null,
      colors: [
        ["#35a3fc", "#35a3fc"],
        ["#1459d9", "#1459d9"],
        ["#fffd88", "#fffd88"],
        ["#108707", "#108707"],
        ["#29dbf8", "#29dbf8"],
        ["#fcbd32", "#fcbd32"],
        ["#fa5356", "#fa5356"],
        ["#ee76fc", "#ee76fc"],
        ["#89f480", "#89f480"],
        ["#f38053", "#f38053"],
        ["#25b5b0", "#25b5b0"],
      ],
    };
  },
  watch: {
    data: {
      handler(newValue, old) {
        this.options.data = [...newValue];
        this.$nextTick(() => {
          this.initeCharts();
        });
      },
      deep: true,
    },
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    initeCharts() {
      if (!this.chart) {
        this.chart = this.$echarts.init(this.$refs["funnel"]);
      }
      var that = this;
      this.options = {
        tooltip: {
          trigger: "item", //数据项图形触发
          backgroundColor: "rgba(50,50,50,0.7)", //提示框浮层的背景颜色
          borderColor: "#fff", //提示框浮层的边框颜色
          textStyle: {
            color: "#fff",
            fontSize: "15",
          },
        },
        legend: {
          orient: "vertical",
          top: "center",
          right: "5%",
          icon: "rect",
          itemWidth: 12,
          itemHeight: 6,
          formatter: function (name) {
            return (
              name +
              " " +
              that.data.find((item) => item.name == name).value +
              " 次"
            );
          },
          data: Array.isArray(this.data) && this.data.length ? this.data.map(item => item.name) : [],
          textStyle: {
            color: "#fff",
          },
          itemStyle: {
            borderWidth: 0,
          },
        },
        calculable: true,
        series: [
          {
            name: "故障分布",
            type: "funnel",
            left: "10%",
            width: "50%",
            gap: 2,
            label: {
              show: true, //显示文本标签
              position: "inside", //标签的位置：漏斗图梯形内部
              color: "#000",
            },
            labelLine: {
              show: true,
            },
            itemStyle: {
              opacity: 1,
              borderWidth: 0,
            },
            emphasis: {
              label: {
                position: "inside",
              },
            },
            data: this.data,
          },
        ],
      };
      this.chart.setOption(this.options, true, true);
    },
  },
  mounted() {
    this.initeCharts();
    resizeChart(this.chart);
  },
};
</script>
<style scoped>
.pie-bar {
  height: 100%;
  width: 100%;
}
</style>
